"use strict";
const boxDom = document.querySelector('.box');
// 枚举
var Color;
(function (Color) {
    Color[Color["#ccc"] = 1] = "#ccc";
    Color[Color["skyblue"] = 2] = "skyblue";
    Color[Color["red"] = 3] = "red";
})(Color || (Color = {}));
// 记录递归层级
let num = 0;
// 递归遍历
const menuArr = (arr, num) => {
    num += 1;
    const newArr = arr.map(item => {
        return `<div>
            <p style="background: ${Color[num]}">${item.title}</p>
            ${!item.children ? '' : `<div class="menuItem">
                ${menuArr(item.children, num)}
                </div>`}
        </div>`;
    }).join('');
    return newArr;
};
// 点击事件
const bindEvent = () => {
    // 获取所有的p标签  Array.from  将伪数组 转换为数组
    const pDom = Array.from(document.querySelectorAll('p'));
    pDom.forEach(item => {
        item.addEventListener('click', (e) => {
            if (item.nextElementSibling) {
                let isShow = e.target.nextElementSibling.style.display;
                if (isShow === 'block') {
                    e.target.nextElementSibling.style.display = 'none';
                }
                else {
                    e.target.nextElementSibling.style.display = 'block';
                }
            }
        });
    });
};
const render = () => {
    boxDom.innerHTML = menuArr(menu, num);
    bindEvent();
};
render();
